<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点名器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        section {
            width: 900px;
            height: 100%;
            margin: 0 auto;
            position: relative;
        }

        section img {
            position: absolute;
            left: 50%;
            margin-left: -225px;
            top: 50%;
            margin-top: -150px;
        }

        section .title {
            color: #fff;
            font-size: 20px;
            position: absolute;
            left: 34%;
            top: 37%;
        }

        section .name {
            color: #fff;
            font-size: 50px;
            font-weight: 900;
            position: absolute;
            left: 37%;
            top: 45%;
        }
    </style>
</head>
<body>
<section>
    <img src="blackboard.jpg" alt="">
    <p class="title">能不能点到你的名字呢？</p>
    <p class="name"></p>
</section>
</body>
<script>
    var names = [
        '程晓磊', '范晋宇', '冯军', '刘子浩',
        '张昊', '张美', '高超', '常坤',
        '董强', '于冠涛', '付鹏飞', '张欣',
        '郑姣姣', '王润丰', '张利民', '寻立',
        '王怀志', '王玲涛', '曹琨', '韩宝利', '李鹏'
    ];
    var timer2;
    var oName = document.querySelector(".name");

    function randomNumber() {
        return parseInt(Math.random() * 21);
    }

    function main() {
        var timer1 = setInterval(function () {
            oName.innerText = names[randomNumber()];
        }, 50);
        timer2 = setTimeout(function () {
            clearInterval(timer1);
        }, 1000);
    }

    document.addEventListener("keydown", function (event) {
        if (event.keyCode === 32) {
            main();
            timer2=null;
        }
    }, false);
</script>
</html>